<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 什么是回调地狱？
      // 嵌套很多层回调函数的这种代码的写法叫回调地狱
      //   var xhr = new XMLHttpRequest();
      //   xhr.open("get", "./a.json", true);
      //   xhr.send();
      //   xhr.onreadystatechange = function () {
      //     if (xhr.readyState == 4) {
      //       if (xhr.status == 200) {
      //         let res = JSON.parse(xhr.responseText);
      //         console.log(res);
      //       }
      //     }
      //   };

      //promise是es6 中专门用来处理异步回调的，可以解决回调地狱
      //   promise是一个构造函数，这个构造函数中放一个回调函数作为参数，这个回调函数中放的是异步的操作，对于一个异步操作来说执行是需要时间的，所以一开始promise是一个pending状态，到了一定的条件就会变成fulfilled（成功）或者reject（失败的状态） ，在成功的时候我们执行resolve回调函数，其实调用的是.then里的回调，在失败的时候执行reject回调函数其实调用的是catch回调

      //   说白了 promise就是把原来的回调函数嵌套在里面的写法变成了链式写法（.then的写法）

      let http = new Promise((resolve, reject) => {
        var xhr = new XMLHttpRequest();
        xhr.open("get", "./a.json", true);
        xhr.send();
        xhr.onreadystatechange = function () {
          if (xhr.readyState == 4) {
            if (xhr.status == 200) {
              let res = JSON.parse(xhr.responseText);
              resolve(res);
            }
          } else {
            reject("404");
          }
        };
      })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {});

      let tim = new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve("计时器1111");
        }, 5000);
      });

      tim.then((res) => {
        console.log(res);
      });
    </script>
  </body>
</html>
